<template>
	<div class="dinner-list-container">
		<div class="search-container">
			<input v-model="searchKeyword" type="text" placeholder="请输入搜索关键词" class="search-input" />
			<button @click="searchDinner" class="search-button">搜索</button>
		</div>
		<ul class="dinner-items">
			<li v-for="dinner in filteredDinnerList" :key="dinner.id" class="dinner-item">
				<h2 class="dinner-title">{{ dinner.title }}</h2>
				<p class="dinner-summary">{{ dinner.summary }}</p>
				<div class="dinner-meta">
					<span class="dinner-source">来源: {{ dinner.source }}</span>
					<span class="dinner-date">发布时间: {{ dinner.publishDate }}</span>
				</div>
				<router-link :to="{ name: 'dinnerDetail', params: { id: dinner.id } }"
					class="read-more-link">查看详情</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dinnerList: [{
						id: 1,
						title: "时令鲜蔬匠心烹制的田园风味正餐热推",
						summary: "餐厅推出时令鲜蔬主题正餐，以当季新鲜食材为核心，打造原汁原味的田园风味美食。",
						source: "美食风尚报",
						publishDate: "2025-05-01"
					},
					{
						id: 2,
						title: "老字号传承的经典正餐套餐焕新上市",
						summary: "老字号餐饮品牌推出经典焕新正餐套餐，在传统味道中融入创新元素，重温记忆中的美味。",
						source: "饮食文化研究",
						publishDate: "2025-05-02"
					},
					{
						id: 3,
						title: "地方特色风味的主题正餐之旅开启",
						summary: "美食街区推出地方特色风味主题正餐，汇聚各地经典菜肴，带食客领略舌尖上的地域风情。",
						source: "文旅美食探索",
						publishDate: "2025-05-03"
					},
					{
						id: 4,
						title: "家庭式手工制作的温馨正餐套餐预订火爆",
						summary: "主打家庭手工制作的温馨正餐套餐受热捧，用家常美味传递温暖与关怀。",
						source: "生活消费指南",
						publishDate: "2025-05-04"
					},
					{
						id: 5,
						title: "素食主义者钟爱的纯素正餐菜单全新发布",
						summary: "餐厅推出全新纯素正餐菜单，以丰富多样的素食菜品满足素食主义者的味蕾。。",
						source: "健康素食资讯",
						publishDate: "2025-05-05"
					},
					{
						id: 6,
						title: "浪漫烛光晚餐主题的精致正餐套餐限时供应",
						summary: "餐厅推出浪漫烛光晚餐主题正餐套餐，以精致美食与优雅氛围打造专属浪漫时刻。",
						source: "时尚生活杂志",
						publishDate: "2025-05-06"
					}
				],
				searchKeyword: "",
			};
		},
		computed: {
			filteredDinnerList() {
				if (this.searchKeyword === "") {
					return this.dinnerList; // 修正为dinnerList
				}
				return this.dinnerList.filter(dinner => {
					return dinner.title.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
						dinner.summary.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
						dinner.source.toLowerCase().includes(this.searchKeyword.toLowerCase());
				});
			}
		},
		methods: {
			searchDinner() {
				// 这里可以添加一些验证逻辑，比如判断搜索关键词是否为空等
				// 目前只是触发计算属性重新计算，以更新过滤后的正餐优选列表
			}
		}
	};
</script>

<style scoped>
	.dinner-list-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
	}

	.search-container {
		display: flex;
		margin-bottom: 20px;
	}

	.search-input {
		flex: 1;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}

	.search-button {
		padding: 8px 15px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 3px;
		cursor: pointer;
	}

	.dinner-list-title {
		font-size: 28px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}

	.dinner-items {
		padding: 0;
	}

	.dinner-item {
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 20px;
		background-color: #fff;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.dinner-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.dinner-title {
		font-size: 20px;
		margin-bottom: 10px;
		color: #007bff;
	}

	.dinner-summary {
		font-size: 16px;
		color: #666;
		margin-bottom: 15px;
	}

	.dinner-meta {
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
	}

	.dinner-source {
		margin-right: 20px;
	}

	.read-more-link {
		display: inline-block;
		padding: 8px 15px;
		background-color: #007bff;
		color: #fff;
		text-decoration: none;
		border-radius: 3px;
		transition: background-color 0.3s ease;
	}

	.read-more-link:hover {
		background-color: #0056b3;
	}
</style>